<template>
  <div>
    <div class="finance-box mt20">
      <div class="finance-box-fix pa15">
        <div>
          <div class="font14">
            钱包余额（元）
            <el-button type="primary" class="primary" data-toggle="modal" data-target="#again"
              >提现</el-button
            >
          </div>
          <p class="font36 bold">{{ moneyNum.money }}</p>
          <p class="font12">已结算未提现的活动票款</p>
        </div>
        <div>
          <div class="font14">冻结金额（元）</div>
          <p class="font36 bold">{{ moneyNum.money_frozen }}</p>
          <p class="font12">未结束活动款项会在冻结账户</p>
        </div>
        <div>
          <div class="font14">已提现金额（元）</div>
          <p class="font36 bold">{{ moneyNum.money_out }}</p>
          <p class="font12">包含提现中和已到账金额</p>
        </div>
      </div>
    </div>
    <div class="title font14 ma30-15">
      <p>提款说明</p>
    </div>
    <div class="bor7 back finance-feg font12">
      1、您可先将活动款项结算至钱包余额后，再申请提现；支持多活动结算后一次性提现。单次最低提款额度为
      X 元。
      <br />2、平台打款时间为：每月X号、X号为打款日。
      <br />每月X号中午12：00前申请提款的将在当月X号操作打款，
      <br />每月X号中午12：00前申请提款的将在次月X号操作打款。
      <br />如遇法定节假日打款时间则顺延至下一个工作日，由此给您带来的不便，敬请谅解！
      <br />3、如有任何疑问，请联系客服 <span>010-123456789</span> 或发送邮件至
      <span>service@jujuamici.com</span>
    </div>

    <!-- 添加提现弹出框 -->
    <div
      class="modal modal_div fade txsq"
      tabindex="-1"
      role="dialog "
      aria-labelledby="myLargeModalLabel"
      id="again"
      style="display: none"
    >
      <div class="modal-dialog modal-lg" role="document ">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-hidden="true"
            >
              <i class="el-icon-close"></i>
            </button>
            <h4 class="modal-title modal_div_tit ta" id="myLargeModalLabel">
              提现申请
            </h4>
          </div>
          <div class="modal-body clearfix">
            <div class="create-box">
              <el-form
                :model="ruleForm"
                status-icon
                :rules="ruleFormRules"
                ref="ruleForm"
                label-width="6.5rem"
                class="demo-ruleForm mt10"
              >
                <el-form-item label="提现账号" prop="bank_id" class="font12">
                  <el-select
                    v-model="ruleForm.bank_id"
                    placeholder="请选择提现账号"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in this.defaultList"
                      :key="item.id"
                      :label="'(' + item.bank + ')' + item.account"
                      :value="item.name + '_' + item.bank + '_' + item.account"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="提现金额" prop="out_money" class="font12">
                  <el-input
                    type="text"
                    v-model="ruleForm.out_money"
                    autocomplete="off"
                    placeholder="提现金额"
                  ></el-input>
                </el-form-item>

                <el-form-item class="ta butt">
                  <el-button
                    type="submit"
                    class="baocun"
                    @click="handleSubmit">
                    提交
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultList: [],
      defaultinfo: [],
      sort: "id",
      page_size: 100, //每页多少数据
      currentPage: 1, //默认当前页为第一页
      moneyNum: [],
      ruleForm: [],
      ruleFormRules: {
        bank_id: [{ required: true, message: "提现账号必填", trigger: "blur" }],
        out_money: [
          { required: true, message: "提现金额必填", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    //提交
    handleSubmit() {
      this.$nextTick(() => {
        this.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
            //console.log(this.ruleForm);
            var bank = this.ruleForm.bank_id.split("_");

            //定义一个json示例
            var jsons = {
              name: bank[0],
              out_money: this.ruleForm.out_money,
              bank: bank[1],
              bank_number: bank[2],
            };

            var that = this;

            this.$axios
              .post(this.$api + "/api/moneyout/add", jsons)
              .then((res) => {
                //console.log(res.data);
                if (res.data.code == 1) {
                  that.$message({
                    message: res.data.msg,
                    type: "success",
                  });
                  //location.href = "/#/my_story";
                  location.reload();
                } else {
                  that.$message.error(res.data.msg);
                }
              })
              .catch((Error) => {
                //console.log(Error);
              });
          }
        });
      })
    },
    getmoneyInfo() {
      var that = this;
      this.$axios
        .get(this.$api + "//api//money/info")
        .then(function (response) {
          that.moneyNum = response.data.rows[0];
          //console.log("money", that.moneyNum);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    getBankList() {
      var that = this;
      this.$axios
        .get(
          this.$api +
            "//api/moneyaccount/index?page_no=" +
            that.currentPage +
            "&page_size=" +
            that.page_size +
            "&sort=" +
            that.sort +
            "&order=desc&search=;type:;"
        )
        .then(function (response) {
          that.defaultList = response.data.data.data;
          that.defaultinfo = response.data.data.page;
          //console.log("defaultList", that.defaultList);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
  },
  mounted() {
    this.getmoneyInfo();
    this.getBankList();
  },
};
</script>

<style scoped>
html {
  height: 100% !important;
  overflow-y: hidden !important;
}
.finance-box-fix {
  display: -webkit-flex;
  display: flex;
  width: 100%;
  background: #fff;
  text-align: center;
  padding: 1.875rem 1.25rem;
  border-radius: 0.4375rem;
}
.finance-box-fix > div {
  -webkit-flex: 1;
  flex: 1;
}
.finance-box-fix > div {
  border-right: 1px solid #f0f2f5;
}
.finance-box-fix > div:nth-last-child(1) {
  border-right: none;
}
.finance-box-fix > div:nth-of-type(1) {
  text-align: left;
}
.finance-box-fix > div .font36 {
  color: #4285f4;
}
.finance-box-fix > div .font14 {
  color: #484949;
}
.finance-box-fix > div .font12 {
  color: #9fa0a3;
}
.finance-box-fix > div .el-button--primary {
  margin-left: 5.625rem;
  padding: 7px 20px;
}
.finance-feg {
  padding: 1.25rem;
  line-height: 24px;
  color: #545556;
}
.finance-feg span {
  color: #de5044;
}
.table th {
  border-top: none;
  background: #f6f5f5;
  font-size: 0.875rem;
  color: #545556;
  line-height: 3.4375rem !important;
  text-align: center;
  font-size: 0.875rem;
}
table tr td {
  line-height: 3.4375rem !important;
  text-align: center;
  font-size: 0.875rem;
  border-top: none;
  border-bottom: 1px solid #f6f5f5;
}
table .el-button {
  padding: 0.3125rem 0.625rem;
  font-size: 0.875rem;
}
.el-button--danger {
  background: #de5044;
  border-color: #de5044;
}
.el-button--success {
  background: #19a15f;
}
.el-form-item {
  margin-bottom: 0.625rem;
}
.primary {
  padding: 0.8rem 2rem;
}

@media (max-width:767px) {
  .finance-box-fix {
    display: block;
    border: none !important;
  }
  .finance-box-fix > div {
    border: none;
    text-align: center;
    margin-bottom: 20px;
  }
   .finance-box-fix > div:last-child {
     margin-bottom: 0;
   }
  .finance-box-fix > div:nth-of-type(1) {
    text-align: center;
  }
  .finance-box-fix > div .el-button--primary{
    margin-left: 0;
  }
}
</style>

 <style>
.ta.butt .el-form-item__content {
  margin-left: 0 !important;
}.txsq .el-form-item__error {
  position: relative;
}
</style>
